import { useState } from 'react';
import AddTodo from './AddTodo';
import TaskList from './TaskList';

let nextId = 3;
const initialTodos = [
  { id: 0, title: 'Buy milk', done: true },
  { id: 1, title: 'Eat tacos', done: false },
  { id: 2, title: 'Brew tea', done: false },
];

export default function TaskApp() {
  const [todos, setTodos] = useState(initialTodos);

  /**
   * 更新待办事项
   *
   * @param {Object} newTodo 新的待办事项对象
   */
  function handleChangeTodo(newTodo) {
    setTodos(
      todos.map((todo) => {
        if (todo.id === newTodo.id) {
          return newTodo;
        } else {
          return todo;
        }
      })
    );
  }

  /**
   * 删除指定的待办事项
   *
   * @param {number} todoId 待删除待办事项的ID
   */
  function handleDeleteTodo(todoId) {
    const newTodos = todos.filter((todo) => todo.id !== todoId);
    console.log(newTodos);
    setTodos(newTodos);
  }

  /**
   * 添加新的待办事项
   *
   * @param {string} title 待办事项的标题
   */
  function handleOnAddTodo(title) {
    const newTodo = {
      id: nextId++,
      title,
      done: false,
    };
    setTodos([...todos, newTodo]);
  }

  return (
    <>
      <h1>Task App</h1>
      <AddTodo onAddTodo={handleOnAddTodo}/>
      <TaskList
        todos={todos}
        onChangeTodo={handleChangeTodo}
        onDeleteTodo={handleDeleteTodo}
      />
    </>
  );
}
